<template>
  <div class="mine-coupon-layout">
    <div v-for="item in coupons" :key="item.id" class="coupon-item">
      <div class="title">
        <div class="name">{{ item.name }}</div>
        <div class="price">
          <div class="icon">¥</div>
          <div>{{ item.price }}</div>
        </div>
      </div>

      <div class="region">{{ `${item.from} - ${item.to}` }}</div>

      <div class="min">{{ item.min ? `满${item.min}元可使用` : '无使用门槛金额要求' }}</div>

      <div class="footer">
        <div class="limit">{{ `本卡券仅针对${item.limit}可用` }}</div>
        <!-- <div class="action">去使用</div> -->
      </div>

      <div class="overdue">
        <div class="circle">
          <div class="text">已过期</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      coupons: []
    }
  },

  mounted() {
    this.fetch()
  },

  methods: {
    fetch() {
      this.coupons = [
        {
          id: 0,
          name: '省18元：优惠券',
          price: '18',
          from: '2020.05.16',
          to: '2020.08.16',
          min: '',
          limit: '简历精修课'
        },
        {
          id: 1,
          name: '省18元：优惠券',
          price: '18',
          from: '2020.05.16',
          to: '2020.08.16',
          min: '200',
          limit: '简历精修课'
        }
      ]
    }
  }
}
</script>

<style lang="less" scoped>
@overdue-circle: rgba(221, 221, 221, 0.3);
@overdue-color: rgba(221, 221, 221, 0.6);

.mine-coupon-layout {
  padding-top: 5px;

  .coupon-item {
    margin: 10px 17px;
    background-color: #ffffff;
    border-radius: 5px;
    padding: 5px 17px 11.5px 17px;
    position: relative;
    overflow: hidden;

    .title {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .name {
        font-size: 18px;
        color: #222222;
      }

      .price {
        font-size: 36px;
        line-height: 50px;
        color: #ff6669;
        font-weight: 500;
        display: flex;
        align-items: flex-start;

        .icon {
          font-size: 14px;
          line-height: 36px;
          margin-right: 3px;
        }
      }
    }

    .region {
      margin-top: -8.5px;
      font-size: 12px;
      color: #999999;
    }

    .min {
      margin-top: 3px;
      font-size: 12px;
      color: #999999;
      padding-bottom: 7.5px;
      border-bottom: 0.5px solid #eeeeee;
    }

    .footer {
      margin-top: 9.5px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .limit {
        font-size: 12px;
        color: #666666;
        line-height: 26px;
      }

      .action {
        width: 84.5px;
        height: 26px;
        border-radius: 13px;
        background-color: #ff6669;
        color: #ffffff;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .overdue {
      position: absolute;
      width: 68px;
      height: 68px;
      border-radius: 50%;
      border: 2px solid @overdue-circle;
      right: -15px;
      bottom: -20px;
      display: flex;
      align-items: center;
      justify-content: center;
      transform: rotate(-30deg);

      .circle {
        width: 58px;
        height: 58px;
        border-radius: 50%;
        border: 1px solid @overdue-circle;
        display: flex;
        align-items: center;
        justify-content: center;
        color: @overdue-color;
        font-size: 11px;
        line-height: 20px;

        .text {
          border-top: 2px dotted @overdue-color;
          border-bottom: 2px dotted @overdue-color;
          padding: 0 3px;
        }
      }
    }
  }
}
</style>